<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap - table</title>

    <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-primary text-center">bootstrap table demo</h2>

            <div id="toolbar2" class="btn-group">
                <button id="btn_add2" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit2" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete2" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>

            <table class="table table-striped" id="myTab">
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="panel-body" style="padding-bottom:0px;">
                <div class="panel panel-default">
                    <div class="panel-heading">查询条件</div>
                    <div class="panel-body">
                        <form id="formSearch" class="form-horizontal">
                            <div class="form-group" style="margin-top:15px">
                                <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="txt_search_departmentname">
                                </div>
                                <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" id="txt_search_statu">
                                </div>
                                <div class="col-sm-4" style="text-align:left;">
                                    <button type="button" style="margin-left:50px" id="btn_query"
                                            class="btn btn-primary">查询
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div id="toolbar" class="btn-group">
                    <button id="btn_add" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                    <button id="btn_edit" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
                </div>

                <table id="tb_departments"></table>
            </div>

        </div>
    </div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../static/js/plugins/sweetalert/sweetalert.min.js"></script>

<script>
    $(function () {
        $("#myTab").bootstrapTable({
            pagination: true,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 4,                       //每页的记录行数（*）
            pageList: [2, 5, 8, 10],        //可供选择的每页的行数（*）
            search: true,
            toolbar: '#toolbar2',            //包含工具栏中的元素
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            uniqueId: "id",
            queryParams: function (params) {
                var temp = {
                    "a": 1,
                    "b": 2,
                    "limits": params.limit,
                    "offset": params.offset
                }
                return temp;
            },
            url: "../static/js/demo/json/data1.json",
            columns: [{
                checkbox: true  /* 是否添加复选框*/
            },
                {
                    field: 'id',
                    title: 'ID'
                }, {
                    field: 'name',
                    title: '用户名'
                }, {
                    field: 'age',
                    title: '年龄',
                    cellStyle: {css: {"color": "pink"}},
                    sortable: true
                }, {
                    field: 'gender',
                    title: '性别'
                }, {
                    align: "center",
                    width: '150px',
                    title: "操作",
                    events: {

                        "click .updateBtn": function (e, value, row, index) {
                            alert("确定要更新 id=" + row.id + " 的记录吗？");
                            //todo
                        },
                        "click .deleteBtn": function (e, value, row, index) {
                            //alert("确定要删除吗？");
                            //采用 sweetalert 组件
                            swal({
                                title: "您确定要删除这条数据吗",
                                text: "删除后将无法恢复，请谨慎操作！",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#DD6B55",
                                confirmButtonText: "删除",
                                cancelButtonText: "取消",
                                closeOnConfirm: false
                            }, function () {
                                // todo
                                console.log("要删除的记录是：" + row.id);
                                swal("删除成功！", "您已经永久删除了这条信息。", "success");
                            });

                        }

                    },
                    formatter: function (value, row, index) {
                        /*return [
                            "<a href='#?id="+row.id+"' class='btn btn-primary btn-xs' style='margin-right: 15px;'>更新</a>",
                            "<a href='#?id="+row.id+"' class='btn btn-danger btn-xs'>删除</a>"
                        ].join("");*/
                        // 使用button时，需要指定事件
                        return [
                            "<button type='button' class='updateBtn btn btn-primary btn-xs' style='margin-right: 15px;'>更新</button>",
                            "<button type='button' class='deleteBtn btn btn-danger btn-xs'>删除</button>"
                        ].join("");
                    },
                }]
        });

        //下面的例子
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    });

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '../static/js/demo/json/data2.json',         //请求后台的URL（*）
                //method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是示分页（*）
                sortable: false,                     //是否启用排序否显
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索
                strictSearch: false,                 //查询时是否严格匹配, true表示严格匹配，false表示模糊匹配
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'Name',
                    title: '部门名称'
                }, {
                    field: 'ParentName',
                    title: '上级部门'
                }, {
                    field: 'Level',
                    title: '部门级别'
                }, {
                    field: 'Desc',
                    title: '描述'
                },]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            console.log(params);
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
            $("#btn_query").click(function (event) {
                //1.
                alert("单南了查询按钮");
            });

            $("#btn_add").click(function (event) {
                alert("新增")
            });

            $("#btn_edit").click(function (event) {
                alert("更新")
            });

            $("#btn_delete").click(function (event) {
                alert("删除")
            });

        };

        return oInit;
    };

</script>
</body>
</html>